<template>
	<view>
		<u-sticky>
			<view class="m-head1">
				<image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
				<u-navbar leftText="选择停车场" @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
					:bgColor="bgColor">
				</u-navbar>
				<view class="m-searchp1 m-searchh1" slot="left">
					<view class="wp">
						<view class="inner">
							<view class="right">
								<u-search placeholder="快速搜索停车场" :showAction="false" v-model="searchValue"></u-search>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 标签页 -->
		<view class="tab-container">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === tab.value }"
				@click="switchTab(tab.value)">
				{{ tab.name }}
			</view>
		</view>

		<view class="wp">
			<view class="ul-selectm1">
				<view v-for="(item, index) in searchResult" :key="index" class="list-item" @click="selectItem(item)">
					<view class="content">
						<view class="title">{{ item.name }}</view>
						<view class="address">
							<image :src="currentTab == 'group' ? imageUrl + 'list/map-point2.svg' : imageUrl + 'list/map-point.svg'"
								class="icon" mode="widthFix"></image>
							<text class="address-text">{{ currentTab == 'group' ? item.parkName : item.address }}</text>
						</view>
					</view>
					<view class="more-icon">
						<image :src="imageUrl +'list/arr4.svg'" class="icon" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="g-ht"></view>
		<view class="g-dwbtn" v-if="false">
			<navigator url="/pages/monthlycard/det" class="g-submit2" :class="{ active: selectedIndex !== -1 }"
				@click="handleSelect" hover-class="none">
				选择
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getParams,
		commonSelect
	} from '../../api/myHttps';

	export default {
		data() {
			return {
				searchValue: "",
				bgColor: 'transparent',
				selectedIndex: -1,
				parkList: [],
				currentTab: 'out', // 当前选中的标签页
				tabs: [{
						name: '公共停车场',
						value: 'out'
					},
					{
						name: '通停',
						value: 'group'
					},
					{
						name: '道路',
						value: 'in'
					}
				],
				kind: 0
			}
		},
		computed: {
			searchResult() {
				// 如果搜索值为空，则返回全部停车场列表
				if (!this.searchValue) {
					return this.parkList;
				}

				// 根据搜索值过滤parkList，并返回过滤后的结果
				return this.parkList.filter(item => {
					// 使用includes方法进行模糊匹配
					return item.name.toLowerCase().includes(this.searchValue.toLowerCase()) ||
						item.address.toLowerCase().includes(this.searchValue.toLowerCase());
				});
			},
		},
		onLoad(options) {
			this.kind = options.kind;
			if (this.kind == 1) {
				this.tabs = [{
						name: '公共停车场',
						value: 'out'
					},
					{
						name: '道路',
						value: 'in'
					}
				];
			}
		},
		onShow() {
			this.getNearParkList(this.currentTab)
		},
		methods: {
			// 添加此方法用于转义正则表达式中的特殊字符
			escapeRegExp(string) {
				return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $&表示匹配整个字符串
			},
			getNearParkList(type) {
				this.groupType = type;
				let data = {
					"key": "park_list_zkh",
					"phone": uni.getStorageSync('phone'),
					"parameter": {
						"type": type,
						"name": this.searchValue,
						"longitude": uni.getStorageSync("userLongitude"),
						"latitude": uni.getStorageSync("userLatitude")
					}
				}

				commonSelect(data).then((res) => {
					this.parkList = res.records;
				})
			},
			// 选择项目
			selectItem(item) {
				console.log(JSON.stringify(item));
				if (this.currentTab == 'group') {
					item.groupType = 1;
				} else {
					item.groupType = 0;
				}
				item.kind = this.kind;

				uni.navigateTo({
					url: '/pages/monthlycard/monthlycard?parkItem=' + encodeURIComponent(JSON.stringify(item))
				})
			},

			// 切换标签页
			switchTab(tabValue) {
				this.currentTab = tabValue;
				this.getNearParkList(this.currentTab)
			},

			rightClick() {
				// 右上角按钮点击事件
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4FAF7;
	}

	.m-searchh1 {
		padding-bottom: 0;
	}

	/* 标签页样式 */
	.tab-container {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		padding: 10rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #007AFF;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background-color: #007AFF;
		border-radius: 3rpx;
	}

	/* 列表项样式 */
	.list-item {
		display: flex;
		align-items: center;
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-bottom: 1px solid #f5f5f5;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.content {
		flex: 1;
	}

	.title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #999;
	}

	.icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.address-text {
		flex: 1;
	}

	.more-icon {
		margin-left: 20rpx;
	}

	.more-icon .icon {
		width: 16rpx;
		height: 16rpx;
		margin-right: 0;
	}
</style>